<template>
    <div id="MainLeft">
        <ul>
            <li v-for="(v, i) in this.mainObj" :key="v.par_id" @click="leftClickitem(v.assemblyId)"
                :class="assemblyId == v.assemblyId ? 'borbackiten' : ''">
                <div class="icon">

                    <img v-if="v.status === 0" src="../../../assets/imgx/Warning_icon.png" alt="">
                    <img v-else-if="v.status === 1" src="../../../assets/imgx/Reminder_icon.png" alt="">
                </div>
                <!-- <dv-border-box-7> -->

                <img v-if="v.status === 2" src="../../../assets/imgx/region-ok.png" alt="" />
                <img v-else-if="v.status === 1" src="../../../assets/imgx/region-warning.png" alt="" />
                <img v-else-if="v.status === 0" src="../../../assets/imgx/region-error.png" alt="" />

                <span>{{ v.assemblyName }}</span>
                <!-- </dv-border-box-7> -->
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    // name: "MainLeft",
    props: ['mainObj', "asseaytid"],
    data() {
        return {
            assemblyId: ""
        }
    },
    methods: {
        leftClickitem(item) {
            this.assemblyId = item

            this.$emit("rightLinkage", this.assemblyId)
        },
    },
    watch: {
        'asseaytid': {
            handler(newVal, oldVal) {
                this.assemblyId = newVal
            },
            immediate: true,
        }
    },
}
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
    display: none;
}

.borbackiten {
    width: 130px;
    height: 151px;
    background: rgba(41, 137, 253, .1);
    opacity: 1;
    border: 0.44px solid #2a89fd;
    border-image-source: radial-gradient(10% 10%, transparent 0px, transparent 100%, #022e74 50%) !important;
    border-image-slice: 1;
    border-width: 1px;
    border-style: solid;
    border-image-outset: 1px;
}

#MainLeft {
    width: 100%;
    height: 100%;

    ul {
        width: 100%;
        height: 87%;
        display: flex;
        flex-direction: column;
        align-items: center;
        list-style: none;
        overflow-y: auto;

        li {
            flex: none;
            margin: 11px 0px;
            height: 134px;
            color: #ffffff;
            opacity: 1;
            border-image-source: radial-gradient(65% 65%, transparent 0px, transparent 100%, #1a3250 100%);
            border-image-slice: 1;
            border-width: 1px;
            border-style: solid;
            position: relative;
            font-size: 11px;
            border: 0.1px solid #1a3250;
            .icon {
                width: 32px;
                height: 32px;
                position: absolute;
                top: -10px;
                right: 2px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            img {
                height: 100px;
                padding: 0px 9px;
            }

            span {
                width: 100%;
                height: 40px;
                text-align: center;
                display: inline-block;
            }
        }
    }
}
</style>